<template>
    <div class="g-breadcrumb">
        <div class="g-breadcrumb-nav">
            <template v-for="( path, index ) in paths">
                <div class="g-breadcrumb-item" :class="{ 'active': index === paths.length - 1 }">
                    <span>{{ path }}</span>
                </div>
                <div class="g-breadcrumb-separator" v-if="index !== paths.length - 1">
                    <i class="iconfont icon-slide-right"></i>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: 'GBreadcrumb',
    props: {
        paths: Array
    }
};

</script>
<style lang="scss">
@import 'common';

.g-breadcrumb {
    
    &::after {
        @include clearfix();
    }

    .g-breadcrumb-item {
        font-size: 14px;
        color: $gray;
        float: left;
        letter-spacing: 0;
        height: 100%;
        line-height: 71px;

        &.active {
            color: $dark;
        }
    }

    .g-breadcrumb-separator {
        float: left;
        height: 100%;
        line-height: 71px;
        margin: 0 6px;

        > i {
            font-size: 16px;
        }
    }
}
</style>